<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<!-- ios私有meta类 -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	
	
	<!--引用SUI Modle资源-->
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm-extend.min.css">
	
		
	<!--引入本地文件-->
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/normalize.css" type="text/css">
	<link rel="stylesheet" href="css/cart.css" type="text/css">

	
	<title>购物车</title>
</head>
<body>
	<div class="page">
		<!--页面头部-->
		<header class="bar bar-nav">
			<a href="user.html" class="icon icon-left pull-left external"></a>
			<h1 class="title">购物车</h1>
			<a href="index.html" class="icon icon-home pull-right external"></a>
		</header>
		
		<!--产品表单 开始-->
		<div class="content">
			<div class="card-header">我的商品:</div>
			<!--主部分 开始-->
			<div class="card-main">
				
				<!--独立卡片 开始-->
				<div class="card" id="mySelect">
					<!--主要部分-->
					<div class="card-content">
						<label class="label-checkbox item-content">
							<input type="checkbox" name="my-radio">
							<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
							<div class="item-inner">
								<div class="list-block media-list">
									<ul>
										<li class="item-content">
											<div class="item-media">
												<img src="images/iphone_1.jpg" width="100" height="100">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
													<div class="item-title">
														<p id="name">iPhone6 Plus A级成色</p>
														<p>￥<span id="price">3000</span></p>
													</div>
												</div>
												<div class="item-subtitle">
													<div class="calculator">
														<a class="c-button" onclick="minus_text()">-</a>
														<b class="c-amount" id="amount">0</b>
														<a  class="c-button" onclick="add_text()">+</a>
													</div>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</label>
    				</div>
					<!--主要部分-->
					
					<!--底部部分-->
    				<div class="card-footer">
						<span class="icon icon-remove" onclick="removeOption()"></span>
						<p>￥<span id="money">0</span></p>
    				</div>
					<!--底部部分-->
				
					
				</div>
				<!--独立卡片 结束-->
			
				<!------------------------------------------------------------------>
				
				
				
			</div>
			<!--主部分 结束-->
			
			<!--地址 开始-->
			<div class="cart-other" onclick="location.href='place.html'">
				<div>
					<span>修改默认地址</span>
					<b>></b>
				</div>
			</div>
			<!--地址 结束-->
			
			<!--优惠劵 开始-->
			<div class="cart-other" onclick="location.href='cash_area.html'">
				<div>
					<span>使用代金券</span>
					<b>></b>
				</div>
			</div>
			<!--优惠劵 结束-->
			
			<div style="height: 5rem; background-color: #fff;"></div>

		</div>
		<!--产品表单 结束-->
		
		<!--工具栏 开始-->
		<nav class="bar bar-tab tools">
			<a class="tab-item">
				<span class="tab-label">结算</span>
			</a>
			
		</nav>
		<!--工具栏 结束-->
		
	</div>
	
	
	<!--引用SUI Modle资源-->
	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm-extend.min.js' charset='utf-8'></script>
	
	<!--数量事件-->
	<script type="text/javascript">
		function add_text() {
				if (parseInt(document.getElementById('amount').innerHTML) < 100) {
						document.getElementById('amount').innerHTML ++;
						document.getElementById('money').innerHTML = parseInt(document.getElementById('money').innerHTML) + parseInt(document.getElementById('price').innerHTML); 
				}
	
		}

		function minus_text() {
				if (parseInt(document.getElementById('amount').innerHTML) > 1) {
						document.getElementById('amount').innerHTML--;
						document.getElementById('money').innerHTML = parseInt(document.getElementById('money').innerHTML) - parseInt(document.getElementById('price').innerHTML); 
				}
	
		}
	</script>
	
	<!--删除事件-->
	<script type="text/javascript">
		function removeOption(){
  				var x=document.getElementById("mySelect")
  				x.remove(x.selectedIndex)
  		}
	</script>
	
	<script>
		
		$(document).on('click','.tools', function(){
			var name = document.getElementById('name').innerHTML
			var amount = document.getElementById('amount').innerHTML
			 $.modal({
				 title: '你购买了：',
				 text: String(name) + ' x ' + String(amount) + '<br>',
				 buttons: [
					 {
						 text: '确定',
						 onClick: function(){
							 location.href='account.html'
						 }
					 },
					 {
						  text: '取消'
					 }]
			 })
		});
	</script>
	
</body>
</html>